import { IPlank } from '@/types';
import { xyz } from '@/utils';
import { Divider } from 'antd';
import { groupBy, transform } from 'lodash-es';
import { Vector3 } from 'three';
import { InlineInfoItems } from '../InlineInfoItems';

export function HoleCount(props: { plank?: IPlank }) {
  const { plank } = props;

  if (!plank) return;
  const holeCount = getHoleCount(plank);

  return (
    <>
      <InlineInfoItems
        items={holeCount.map((total, i) => {
          const value = `${total.count}-Ф${total.name}`;
          return {
            value,
          };
        })}
      />
    </>
  );
}
export function GrooveCount(props: { plank?: IPlank }) {
  const { plank } = props;
  if (!plank?.grooves.length) return '-';
  return (
    <>
      <InlineInfoItems
        items={(plank?.grooves ?? [])
          .map((groove) => {
            const { start, end, width, depth } = groove;
            if (!start || !end) {
              return;
            }
            const length = new Vector3()
              .fromArray(xyz(start))
              .distanceTo(new Vector3().fromArray(xyz(end)));
            return `${length}*${width}*${depth}`;
          })
          .map((item) => {
            return { value: item };
          })}
      />
    </>
  );
}

function getHoleCount(plank: IPlank) {
  return transform(
    groupBy(plank?.holes, (hole) => {
      return `${hole.diameter} * ${hole.depth}`;
    }),
    (total, holes, name) => {
      total.push({ count: holes.length, name: name });
    },
    [] as { count: number; name: string }[],
  );
}
